<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>我的课程 - 智能选课系统</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
	<style type="text/css">
		.back-btn {
			display: block;
			text-align: center;
			margin-top: 25px;
		}

		.back-btn a {
			display: inline-block;
			padding: 10px 20px;
			background: linear-gradient(135deg, #95a5a6, #7f8c8d);
			color: white;
			border-radius: 5px;
			text-decoration: none;
			transition: all 0.3s ease;
		}

		.back-btn a:hover {
			transform: translateY(-2px);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
			text-decoration: none;
			color: white;
		}
		body {
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
			padding: 20px;
			min-height: 100vh;
		}

		.courses-container {
			max-width: 1200px;
			margin: 0 auto;
			background: white;
			border-radius: 15px;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
			overflow: hidden;
		}

		.courses-header {
			background: linear-gradient(135deg, #667eea, #764ba2);
			color: white;
			padding: 20px 30px;
			text-align: center;
		}

		.courses-header h3 {
			margin: 0;
			font-weight: 600;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.courses-header h3 i {
			margin-right: 10px;
			font-size: 1.5rem;
		}

		.courses-body {
			padding: 30px;
		}

		.courses-table {
			width: 100%;
			border-collapse: collapse;
			margin-top: 20px;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
		}

		.courses-table th {
			background: linear-gradient(135deg, #302b63, #24243e);
			color: white;
			padding: 15px;
			text-align: center;
			font-weight: 600;
		}

		.courses-table td {
			padding: 12px;
			text-align: center;
			border-bottom: 1px solid #eaeaea;
		}

		.courses-table tr:nth-child(even) {
			background: #f9f9f9;
		}

		.courses-table tr:hover {
			background: #f1f9ff;
		}

		.students-link {
			display: inline-block;
			padding: 6px 12px;
			background: linear-gradient(135deg, #667eea, #764ba2);
			color: white;
			border-radius: 4px;
			text-decoration: none;
			transition: all 0.3s ease;
		}

		.students-link:hover {
			transform: translateY(-2px);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
			color: white;
			text-decoration: none;
		}

		.no-data {
			text-align: center;
			padding: 40px;
			color: #7f8c8d;
		}

		.no-data i {
			font-size: 3rem;
			margin-bottom: 15px;
			display: block;
		}

		@media (max-width: 768px) {
			.courses-body {
				padding: 20px 15px;
			}

			.courses-table {
				font-size: 0.9rem;
			}

			.courses-table th,
			.courses-table td {
				padding: 8px 4px;
			}
		}
	</style>
</head>
<body>
<div class="courses-container">
	<div class="courses-header">
		<h3><i class="fas fa-book-open"></i> 我的授课课程</h3>
	</div>

	<div class="courses-body">
		<c:choose>
			<c:when test="${not empty requestScope.list}">
				<div class="table-responsive">
					<table class="courses-table">
						<thead>
						<tr>
							<th>编号</th>
							<th>名称</th>
							<th>上课时间</th>
							<th>上课地点</th>
							<th>学分</th>
							<th>限制人数</th>
							<th>可选人数</th>
							<th>操作</th>
						</tr>
						</thead>
						<tbody>
						<c:forEach items="${requestScope.list}" var="c">
							<tr>
								<td>${c.getNo()}</td>
								<td>${c.getName()}</td>
								<td>${c.getTime()}</td>
								<td>${c.getPlace()}</td>
								<td>${c.getCredit()}</td>
								<td>${c.getLimitNum()}</td>
								<td>${c.getResidueNum()}</td>
								<td>
									<a href="${pageContext.request.contextPath}/MyTeachCourse_Servlet?id=student&No=${c.getNo()}" class="students-link">
										<i class="fas fa-users"></i> 查看学生
									</a>
								</td>
							</tr>
						</c:forEach>
						</tbody>
					</table>
				</div>
			</c:when>
			<c:otherwise>
				<div class="no-data">
					<i class="fas fa-book"></i>
					<h4>暂无课程数据</h4>
					<p>您当前没有授课课程</p>
				</div>
			</c:otherwise>
		</c:choose>
	</div>
</div>
<div class="back-btn">
	<a href="javascript:history.back()"><i class="fas fa-arrow-left"></i> 返回</a>
</div>
</body>
</html>